<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${article.title}">文章详情</title>
    <style>
        /* 全局样式 */
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f9f9f9;
            margin: 0;
            padding: 0;
            color: #333;
            line-height: 1.6;
        }

        .container {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            max-width: 1200px;
            margin: 60px auto;
            padding: 0 20px;
        }

        /* 文章区域样式 */
        .article-panel {
            flex: 1 1 70%;
            min-width: 500px;
            background-color: white;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            border-radius: 12px;
            transition: transform 0.3s ease;
        }

        .article-panel:hover {
            transform: translateY(-5px);
        }

        /* 评论区域样式 */
        .comment-panel {
            flex: 1 1 25%;
            min-width: 300px;
            background-color: white;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            border-radius: 12px;
            transition: transform 0.3s ease;
        }

        .comment-panel:hover {
            transform: translateY(-5px);
        }

        /* 标题样式 */
        h1 {
            color: #3a7d44;
            margin-bottom: 15px;
            font-size: 28px;
            font-weight: 600;
            padding: 30px 30px 0;
            border-bottom: 1px solid #f0f0f0;
        }

        /* 返回按钮样式 */
        .button-group {
            padding: 0 30px 15px;
            display: flex;
            justify-content: flex-start;
        }

        /* 作者信息样式 */
        .author-info {
            display: flex;
            align-items: center;
            margin: 0 30px 20px;
        }

        .author-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #e0f2f1;
        }

        .author-name {
            font-weight: bold;
            color: #3a7d44;
            margin-left: 10px;
        }

        /* 文章内容样式 */
        .article-content {
            line-height: 1.8;
            color: #444;
            font-size: 16px;
            margin: 0 30px 30px;
        }

        .article-content p {
            margin-bottom: 20px;
        }

        /* 元信息样式 */
        .meta-info {
            display: flex;
            justify-content: space-between;
            margin: 0 30px 30px;
            color: #777;
            font-size: 14px;
            padding: 15px 0;
            border-top: 1px solid #f0f0f0;
            border-bottom: 1px solid #f0f0f0;
        }

        .view-count {
            margin-right: 15px;
        }

        /* 审核按钮样式 */
        .approval-buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 30px;
            padding: 0 30px 30px;
        }

        .submit-button {
            padding: 10px 25px;
            border-radius: 25px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
            border: none;
            flex: 1;
            text-align: center;
        }

        .submit-button.approve {
            background-color: #4caf50;
            color: white;
        }

        .submit-button.approve:hover {
            background-color: #388e3c;
            transform: translateY(-2px);
        }

        .submit-button.reject {
            background-color: #f44336;
            color: white;
        }

        .submit-button.reject:hover {
            background-color: #d32f2f;
            transform: translateY(-2px);
        }

        /* 评论区样式 */
        .comment-section {
            padding: 30px;
        }

        .comment-section h3 {
            color: #3a7d44;
            font-size: 20px;
            margin-bottom: 20px;
            font-weight: 600;
        }

        .comment {
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid #f0f0f0;
        }

        .comment-author {
            font-weight: bold;
            color: #3a7d44;
            font-size: 16px;
            margin-bottom: 5px;
        }

        .comment-date {
            color: #9e9e9e;
            font-size: 12px;
            margin-bottom: 10px;
        }

        .comment-content {
            margin-top: 5px;
            color: #444;
            font-size: 15px;
        }

        /* 响应式设计 */
        @media (max-width: 992px) {
            .container {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>

<div class="container">
    <!-- 文章内容区域 -->
    <div class="article-panel">
        <h1 th:text="${article.title}" th:attr="data-article-id=${article.id}">文章标题</h1>
        <div class="button-group">
            <a th:href="@{/admin/index}" class="btn">返回首页</a>
        </div>
        <div class="author-info">
            <img th:src="${article.image}" alt="作者头像" class="author-avatar">
            <span class="author-name" th:text="${article.username}">作者名</span>
        </div>
        <div class="article-content" th:text="${article.content}">文章内容</div>
        <div class="meta-info">
            <span class="view-count">阅读数: <span th:text="${article.viewCount}">100</span></span>
            <span>创建时间: <span th:text="${#temporals.format(article.createdAt, 'yyyy-MM-dd HH:mm')}">2023-01-01 12:00</span></span>
            <span>最后修改时间: <span th:text="${#temporals.format(article.updatedAt, 'yyyy-MM-dd HH:mm')}">2023-01-01 12:00</span></span>
        </div>
        <div class="approval-buttons">
            <a th:href="@{/admin/isApproved/{id}(id=${article.id}, approved=true)}"
               class="submit-button approve" style="margin-right: 10px;">审核通过</a>
            <a th:href="@{/admin/isApproved/{id}(id=${article.id}, approved=false)}"
               class="submit-button reject">审核不通过</a>
        </div>
    </div>

    <!-- 评论区域 -->
    <div class="comment-panel">
        <div class="comment-section">
            <h3>评论区</h3>
            <div th:each="comment : ${article.list}" class="comment">
                <div class="comment-author" th:text="${comment.username}">评论者名</div>
                <div class="comment-date" th:text="${#temporals.format(comment.createdAt, 'yyyy-MM-dd HH:mm')}">2023-01-01 12:00</div>
                <div class="comment-content" th:text="${comment.content}">评论内容</div>
            </div>
            <div class="load-more" id="loadMoreComments" style="display: none; cursor: pointer; color: #3a7d44; font-weight: 500;">
                点击加载更多评论
            </div>

            <!-- 评论表单 -->
            <div class="comment-form" style="margin-top: 30px;">
                <div class="comment-form-title" style="color: #777; font-size: 14px; margin-bottom: 15px;">发表您的评论</div>
                <textarea class="comment-input" id="commentContent" placeholder="请输入您的评论..." rows="4" style="width: 100%; padding: 15px; border: 1px solid #ddd; border-radius: 8px; resize: vertical; font-size: 15px;"></textarea>
                <button class="submit-button approve" style="margin-top: 15px; width: 100%;">发表评论</button>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const comments = document.querySelectorAll('.comment');
        const loadMoreBtn = document.getElementById('loadMoreComments');
        const showCount = 3; // 默认显示的评论数
        let isExpanded = false;

        // 初始时只显示前3条评论
        if (comments.length > showCount) {
            for (let i = showCount; i < comments.length; i++) {
                comments[i].style.display = 'none';
            }
            loadMoreBtn.style.display = 'block';
        }

        // 点击加载更多评论
        loadMoreBtn.addEventListener('click', function() {
            if (!isExpanded) {
                for (let i = showCount; i < comments.length; i++) {
                    comments[i].style.display = 'block';
                }
                loadMoreBtn.textContent = '收起评论';
                isExpanded = true;
            } else {
                for (let i = showCount; i < comments.length; i++) {
                    comments[i].style.display = 'none';
                }
                loadMoreBtn.textContent = '加载更多评论';
                isExpanded = false;
            }
        });

        // 评论提交功能
        const commentInput = document.getElementById('commentContent');
        const submitButton = document.querySelector('.submit-button.approve');

        submitButton.addEventListener('click', function() {
            const articleId = document.querySelector('h1').dataset.articleId;
            const commentContent = commentInput.value.trim();

            if (!commentContent) {
                alert('评论内容不能为空');
                return;
            }

            fetch(`/comment/${articleId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ content: commentContent })
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert('评论成功！');
                        location.reload();
                    } else {
                        alert('评论失败，请稍后重试');
                    }
                })
                .catch(error => console.error('Error:', error));
        });
    });
</script>

</body>
</html>